import { Tag, Tooltip } from 'antd';
import { DayScheduleItem } from '../types.d';
import styles from './styles.less';

const padZero = (n: number) => String(n).padStart(2, '0');
const handleShiftTime = (timeFrames: number[]) => {
  const [start, end] = timeFrames;
  if (start == end) return '全天';
  const startH = Math.floor(start / 60);
  const startM = start % 60;
  const endH = Math.floor(end / 60);
  const endM = end % 60;
  return `${padZero(startH)}:${padZero(startM)} - ${padZero(endH)}:${padZero(endM)}`;
};

const ScheduleItem = (props: {
  item: DayScheduleItem;
  editClick: () => void;
  removeClick: () => void;
}) => {
  const { item, editClick, removeClick } = props;
  const pkLots = item.allParkValid
    ? '全路段'
    : item.parkingLots?.map((it) => it.parkingLotName).join(',');
  return (
    <div
      className={styles.scheduleItem}
      style={{
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
      }}
    >
      <div style={{ padding: '0 5px' }}>
        <div style={{ marginBottom: '8px' }}>
          <Tag color="geekblue">
            {item.shiftConfigName}({handleShiftTime(item.shiftConfig)})
          </Tag>
        </div>
        <Tooltip title={pkLots}>
          <div
            style={{
              width: '100%',
              wordBreak: 'break-all',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              display: '-webkit-box',
              WebkitBoxOrient: 'vertical',
              WebkitLineClamp: 2,
              fontSize: '12px',
            }}
          >
            {pkLots}
          </div>
        </Tooltip>
      </div>

      <div className={styles.toolBar}>
        <a onClick={removeClick}>删除</a>
        <a onClick={editClick}>编辑</a>
      </div>
    </div>
  );
};

export default ScheduleItem;
